<template>
  <div class="full-screen-btn-icon">
    <a-tooltip placement="bottom">
      <template #title>
        <span>{{ isFullscreen ? '退出全屏' : '全屏' }}</span>
      </template>
      <FullscreenOutlined @click.native="handleChange" v-show="!isFullscreen" class="fullscreen-icon" />
      <FullscreenExitOutlined @click.native="handleChange" v-show="isFullscreen" class="fullscreen-icon" />
    </a-tooltip>
  </div>
</template>

<script>
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue'
export default {
  name: 'Fullscreen',
  components: { FullscreenOutlined, FullscreenExitOutlined },
  data() {
    return {
      isFullscreen: false
    }
  },
  methods: {
    handleFullscreen() {
      let main = document.body
      if (this.isFullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (main.requestFullscreen) {
          main.requestFullscreen()
        } else if (main.mozRequestFullScreen) {
          main.mozRequestFullScreen()
        } else if (main.webkitRequestFullScreen) {
          main.webkitRequestFullScreen()
        } else if (main.msRequestFullscreen) {
          main.msRequestFullscreen()
        }
      }
    },
    handleChange() {
      this.handleFullscreen()
    },
    changeValue() {
      this.isFullscreen = !this.isFullscreen
    }
  },
  mounted() {
    let isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
    isFullscreen = !!isFullscreen
    document.addEventListener('fullscreenchange', () => {
      this.changeValue()
    })
    document.addEventListener('mozfullscreenchange', () => {
      this.changeValue()
    })
    document.addEventListener('webkitfullscreenchange', () => {
      this.changeValue()
    })
    document.addEventListener('msfullscreenchange', () => {
      this.changeValue()
    })
  }
}
</script>

<style lang="less" scoped>
.full-screen-btn-icon {
  font-size: 18px;
  cursor: pointer;
  color: #515a6e;
}
</style>
